<template><!-- 个人中心 -->
	<view>
		<view class="head">

			<view class="headView">
				<!-- <u-avatar size="180" type="userAvatarUrl"></u-avatar> -->
				<open-data style="height: 60px;width: 60px;border-radius:50px;" type="userAvatarUrl"></open-data>

				<view class="phoneNumber">
					<!-- <view>
						<u-button type="primary" size="small" text="马上去完善" open-type="chooseAvatar"
							bindchooseavatar="bindchooseavatar"></u-button>
					</view> -->
					<open-data type="userNickName"></open-data>
					<!-- <button type="primary" open-type="getPhoneNumber"
						bindgetphonenumber="onGetPhoneNumber">获取手机号码</button> -->
					<text style="margin-top: 10rpx;">13623645645484</text>

				</view>
				<u-icon size="50" name="/static/img/personalImg/setUp.png"></u-icon>
			</view>
			<view v-if="isMerchant" class="moneyView">
				<view class="viewItem">
					<view>
						<text style="font-size: 40rpx">{{todayOrder}}</text>
						<text style="font-size: 15rpx">(单)</text>
					</view>
					<text style="font-size: 20rpx;">今日订单</text>
				</view>
				<view class="viewItem">
					<view>
						<text style="font-size: 40rpx">{{allOrders}}</text>
						<text style="font-size: 15rpx">(单)</text>
					</view>
					<text style="font-size: 20rpx;">合计订单</text>
				</view>
				<view class="viewItem">
					<view>
						<text style="font-size: 40rpx">{{todayConsumption}}</text>
						<text style="font-size: 15rpx">(元)</text>
					</view>
					<text style="font-size: 20rpx;">今日消费</text>
				</view>
				<view class="viewItem">
					<view>
						<text style="font-size: 40rpx">{{wholeConsumption}}</text>
						<text style="font-size: 15rpx">(元)</text>
					</view>
					<text style="font-size: 20rpx;">合计消费</text>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="list">
			<view style="display: flex;justify-content: space-between;">
				<text style="font-size: 35rpx;">我的订单</text>
				<text style="color:darkgrey;font-size: 30rpx;" @click="orderForGoods(0)">全部订单></text>
			</view>
			<view style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 40rpx;">
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="待付款" size="40"
					name="/static/img/personalImg/unpaid.png" @click="orderForGoods(1)"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="待收货" size="40"
					name="/static/img/personalImg/GoodsReceived.png" @click="orderForGoods(2)"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="已完成" size="40"
					name="/static/img/personalImg/complete.png" @click="orderForGoods(3)"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="已取消" size="40"
					name="/static/img/personalImg/cancellation.png" @click="orderForGoods(4)"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="售后/退款" size="40"
					name="/static/img/personalImg/afterSales.png" @click="orderForGoods(5)"></u-icon>
			</view>
		</view>
		<!-- 功能管理 -->
		<view class="list">
			<text style="font-size: 35rpx;">功能管理</text>
			<view style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 40rpx;">
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="地址管理" size="40"
					name="/static/img/personalImg/address.png" @click="address()"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="我的资料" size="40"
					name="/static/img/personalImg/information.png"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="我的客服" size="40"
					name="/static/img/personalImg/customerService.png"></u-icon>
				<u-icon space="6px" labelPos="bottom" label="切换账户" labelSize="10px" size="40"
					name="/static/img/personalImg/switchUsers.png"></u-icon>
			</view>
		</view>
		<!-- 更多推荐 -->
		<view class="list">
			<text style="font-size: 35rpx;">更多推荐</text>
			<view style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 40rpx;">
				<u-icon style="margin-left: 200px;" space="6px" labelPos="bottom" labelSize="10px" label="商家入驻"
					size="40" name="/static/img/personalImg/settleIn.png"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" label="成为骑手" size="40"
					name="/static/img/personalImg/rider.png"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" size="40"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" size="40"></u-icon>
				<u-icon space="6px" labelPos="bottom" labelSize="10px" size="40"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				headSculpture: "https://img1.baidu.com/it/u=453140444,1334408994&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500", //头像
				todayOrder: 20, //今日订单
				allOrders: 200, //全部订单
				todayConsumption: 2000, //今日消费
				wholeConsumption: 3000, //合计消费
				isMerchant: true, //是否是商户
			}
		},
		onLoad() {
		
		},
		methods: {
			//跳转订单页面
			orderForGoods(page) {
				uni.navigateTo({
					url: '/pages/personal/myOrder?page=' + page
				})
			},

			//地址管理
			address() {
				// uni.navigateTo({
				// 	url:'/pages/personal/address'
				// })
				console.log(666)
				uni.login({
					desc: '用户信息授权',
					success: (res) => {

						console.log(res)
					},
					fail: (res) => {
						// debugger
						console.log(res)
					}
				})


			},
			

		}
	}
</script>

<style>
	page {
		background: aliceblue;
	}

	.head {
		padding: 40rpx;
		background-image: url(/static/img/personalImg/headBackground.jpg);
	}

	.headView {
		display: flex;
		font-display: row;
		align-items: center;
	}

	.phoneNumber {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex: 1;
	}

	.moneyView {
		display: flex;
		font-display: row;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.viewItem {
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.list {
		margin: 20rpx;
		padding: 20rpx;
		background: white;
	}
</style>